<template>
	<el-form ref="loginAccount2Ref" size="default" :model="formData" :rules="formRules" class="login-content-form">
		<el-form-item class="login-animation1" prop="tenantId" v-if="tenantEnable">
			<el-input type="text" :placeholder="$t('message.account.placeholder1')" v-model="formData.tenantId" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-user /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="loginName">
			<el-input type="text" :placeholder="$t('message.account.placeholder2')" v-model="formData.loginName" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-user /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3" prop="password">
			<el-input
				:type="isShowPassword ? 'text' : 'password'"
				:placeholder="$t('message.account.placeholder3')"
				v-model="formData.password"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><el-icon-unlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="isShowPassword = !isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation4" prop="verifyCode">
			<el-row :gutter="10" class="w100">
				<el-col :span="15">
					<el-input type="text" :placeholder="$t('message.account.placeholder4')" v-model="formData.verifyCode" clearable autocomplete="off">
						<template #prefix>
							<el-icon class="el-input__icon"><el-icon-position /></el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="9">
					<el-button class="login-content-code" :disabled="countDown > 0" @click="onSendVerifyCode">{{ verifyBtnText }}</el-button>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading">
				<span>{{ $t('message.account.accountBtnText') }}</span>
			</el-button>
		</el-form-item>
		<div class="font12 login-animation5 text-align-right mb10 w100">
			<el-link class="font12" type="primary" :underline="false" @click="onForgetClick">{{ $t('message.other.forget') }}</el-link>
		</div>
		<div class="font12 login-animation5 login-msg">{{ $t('message.other.tips') }}</div>
	</el-form>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Local, Session } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { signIn, kaptchaSend } from '/@/api/login/index';

export default defineComponent({
	name: 'login/account2',
	props: {
		// 绑定值
		tenantEnable: {
			type: Boolean,
			default: () => false,
		},
	},
	setup(props, { emit }) {
		const loginAccount2Ref = ref();
		const router = useRouter();
		const state = reactive({
			isShowPassword: false,
			tenantEnable: false,
			countDown: 0,
			verifyBtnText: '获取验证码',
			formData: {
				tenantId: '',
				loginName: '',
				password: '',
				verifyCode: '',
			},
			loading: false,
			formRules: {
				tenantId: {required: true, message: '租户号码不能为空', trigger: 'blur' },
				loginName: {required: true, message: '登录账号不能为空', trigger: 'blur' },
				password: { required: true, message: '登录密码不能为空', trigger: 'blur' },
				verifyCode: { required: true, message: '验证码不能为空', trigger: 'blur' },
			}
		});
		
		// 登录
		const onSignIn = () => {
			loginAccount2Ref.value.validate(valid => {
				if(valid){
					state.loading = true;
					const publicKey = Local.get('publicKey');
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					let password = SM.sm2Encrypt(state.formData.password, publicKey);
					let params = {
						loginType: 4,
						loginName: loginName, 
						password: password, 
						verifyCode: state.formData.verifyCode,
					};
					Session.set('tenantId', state.formData.tenantId);
					signIn(params).then((res: any) => {
						// 关闭 loading
						state.loading = false;
						if(res.code == 0){
							// 存储 token 到浏览器缓存
							Session.set('token', res.data.accessToken);
							Session.set('refreshToken', res.data.refreshToken);
							emit('success');
						}else{
							state.formData.verifyCode = '';
							Session.clear();
						}
					},() => {
						// 关闭 loading
						state.loading = false;
						state.formData.verifyCode = '';
						Session.clear();
					});
				}
			});
		}
		
		const onSendVerifyCode = () => {
			state.formRules.verifyCode.required = false;
			loginAccount2Ref.value.validate(valid => {
				if(valid){
					const publicKey = Local.get('publicKey');
					let loginName = SM.sm2Encrypt(state.formData.loginName, publicKey);
					kaptchaSend({'loginName': loginName}).then((res: any) => {
						if(res.code == 0){
							ElMessage.success('验证码发送成功');
							state.countDown = 60;
							const t = setInterval(() => {
								state.countDown--;
								state.verifyBtnText = `重新发送（${state.countDown}）`;
							}, 1000);
							setTimeout(() => {
								clearInterval(t);
								state.countDown = 0;
								state.verifyBtnText = '获取验证码';
							}, 61 * 1000);
						}
					})
				}
			})
		}
		
		// 忘记密码
		const onForgetClick = () => {
			router.push('/forget');
		}
		
		watch(() => props.tenantEnable, () => {
			state.tenantEnable = props.tenantEnable;
		});

		return {
			loginAccount2Ref,
			onSignIn,
			onSendVerifyCode,
			onForgetClick,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;
	padding: 0 1px;
	@for $i from 1 through 5 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
	.login-msg {
		color: var(--el-text-color-placeholder);
	}
	.text-align-right{
		text-align: right;
	}
}
</style>
